<template>
  <div class="screen">
    <div
      class="grid"
      ref="gridRefs"
      v-for="(item, i) in ws"
      :key="i"
      @click="selectPlayer(i)"
    >
      <canvas ref="glcanvas" class="h-full w-full" v-show="item" />
      <div class="m-auto" v-show="!item">
        <el-image
          class="w-[156px] h-[156px]"
          src="/img/camera.png"
          fit="fill"
          draggable="false"
        />
        <div class="text-center">未选择摄像头</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { initializeWebGL } from "../utils/videoFn";
import viodeWebSocket from "@/api/webSocket";
const gridRefs = ref<HTMLElement[] | null>([]);
const glcanvas = ref<HTMLCanvasElement[] | null>([]);
const Width = ref<number>(0);
const Height = ref<number>(0);
const gridRects = ref<any[]>();
const ws = ref<any[]>(new Array(1).fill(null));
const wsIndex = ref<number>(0);
/**
 * - 启动websocket，拉取视频流渲染
 * @param startPlayback - 拖拽松开时启动。
 */
const startPlayback = (i: any, item: any) => {
  if (!ws.value[i]) {
    initializeWebGL(glcanvas.value[i]);
    const res = viodeWebSocket(
      item.ip,
      encodeURIComponent(item.vidUrl),
      glcanvas.value[i],
      Width.value,
      Height.value
    );
    ws.value[i] = res;
  } else {
    ws.value[i].close();
    initializeWebGL(glcanvas.value[i]);
    const res = viodeWebSocket(
      item.ip,
      encodeURIComponent(item.vidUrl),
      glcanvas.value[i],
      Width.value,
      Height.value
    );
    ws.value[i] = res;
  }
};

onMounted(() => {
  gridRefs.value[wsIndex.value].classList.add("clicked");
  gridRects.value = gridRefs.value.map(gridRef =>
    gridRef.getBoundingClientRect()
  );
});

const selectPlayer = (i: number) => {
  gridRefs.value.forEach(grid => {
    grid.classList.remove("clicked");
  });
  gridRefs.value[i].classList.add("clicked");
  wsIndex.value = i;
};

/**
 * - 启动websocket，拉取视频流渲染
 * @param videoplay - 摄像头列表点击时启动。
 */
const videoplay = (item: any) => {
  if (!ws.value[wsIndex.value]) {
    initializeWebGL(glcanvas.value[wsIndex.value]);
    const res = viodeWebSocket(
      item.ip,
      encodeURIComponent(item.vidUrl),
      glcanvas.value[wsIndex.value],
      Width.value,
      Height.value
    );
    ws.value[wsIndex.value] = res;
  } else {
    ws.value[wsIndex.value].close();
    initializeWebGL(glcanvas.value[wsIndex.value]);
    const res = viodeWebSocket(
      item.ip,
      encodeURIComponent(item.vidUrl),
      glcanvas.value[wsIndex.value],
      Width.value,
      Height.value
    );
    ws.value[wsIndex.value] = res;
  }
};
defineExpose({ gridRects, startPlayback, videoplay });

onUnmounted(() => {
  ws.value.forEach(item => {
    if (item) {
      item.close();
    }
  });
});
</script>
<style scoped>
.screen {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.grid {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgb(192 196 204);
  border-radius: 5px;
}

.clicked {
  border: 2px solid rgb(1 185 209) !important;
}
</style>
